<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css"
        href="jquery-easyui-1.3.3/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css"
        href="jquery-easyui-1.3.3/themes/icon.css">
  <link rel="icon" href="">
  <script type="text/javascript"
          src="jquery-easyui-1.3.3/jquery.min.js"></script>
  <script type="text/javascript"
          src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  <script type="text/javascript"
          src="js/common.js"></script>
  <script type="text/javascript">
    var url;

    function searchAdmin() {
      $("#dg").datagrid('load', {
        "username": $("#s_username").val()
      });
    }

    function deleteAdmin() {
      var selectedRows = $("#dg").datagrid('getSelections');
      if (selectedRows.length == 0) {
        $.messager.alert("system prompt",
            "Please choose the data to delete!");
        return;
      }

      var strIds = [];
      for (var i = 0; i < selectedRows.length; i++) {
        if (selectedRows[i].id === 1) {
          $.messager.alert("system prompt",
              "Can't modity superadmin' information!");
          return;
        }
        strIds.push(selectedRows[i].id);
      }
      var ids = strIds.join(",");
      $.messager
      .confirm(
          "system prompt",
          "Do you want to delete the <font color=red>"
          + selectedRows.length + "</font> data?",
          function (r) {
            if (r) {
              $
              .post(
                  "admin/delete",
                  {
                    ids: ids
                  },
                  function (result) {
                    if (result.code !== 0) {
                      $.messager.alert("system prompt", result.message);
                    } else {
                      $.messager.alert("system prompt", "Delete successful!");
                      $("#dg").datagrid("reload");
                    }
                  }, "json");
            }
          });
    }

    function openAdminAddDialog() {
      $("#dlg").dialog("open").dialog("setTitle", "Add new admin");
      url = "admins";
    }

    function saveAdmin() {
      $("#fm").form("submit", {
        url: url,
        onSubmit: function () {
          return $(this).form("validate");
        },
        success: function (result) {
          // 表单提交需要转json，post不需要转
          result = JSON.parse(result);
          if (result.code !== 0) {
            $.messager.alert("system prompt", result.message);
          } else {
            $.messager.alert("system prompt", "Save successful!");
            resetValue();
            $("#dlg").dialog("close");
            $("#dg").datagrid("reload");
          }
        }
      });
    }

    function openAdminModifyDialog() {
      var selectedRows = $("#dg").datagrid('getSelections');
      if (selectedRows.length != 1) {
        $.messager.alert("system prompt", "Please choose a data to edit!");
        return;
      }
      var row = selectedRows[0];
      if (row.id == 1) {
        $.messager.alert("system prompt",
            "Can't modity superadmin' information!");
        return;
      }
      $("#dlg").dialog("open").dialog("setTitle", "Edit admin information");
      $('#fm').form('load', row);
      $("#password").val("******");
      url = "admins/" + row.id;
    }

    function resetValue() {
      $("#username").val("");
      $("#rolename").val("");
      $("#password").val("");
    }

    function closeAdminDialog() {
      $("#dlg").dialog("close");
      resetValue();
    }
  </script>
</head>
<body style="margin: 1px;">
<table id="dg" title="Admin Manage" class="easyui-datagrid"
       fitColumns="true" pagination="true" rownumbers="true"
       url="admins" fit="true"  data-options="method:'get',fitColumns:true"
       toolbar="#tb">
  <thead>
  <tr>
    <th field="cb" checkbox="true" align="center"></th>
    <th field="id" width="50" align="center">id</th>
    <th field="username" width="80" align="center">username</th>
    <th field="rolename" width="80" align="center">rolename</th>
  </tr>
  </thead>
</table>
<div id="tb">
  <div>
    <a href="javascript:openAdminAddDialog()" class="easyui-linkbutton"
       iconCls="icon-add" plain="true">Add</a> <a
      href="javascript:openAdminModifyDialog()" class="easyui-linkbutton"
      iconCls="icon-edit" plain="true">Modify</a> <a
      href="javascript:deleteAdmin()" class="easyui-linkbutton"
      iconCls="icon-remove" plain="true">Delete</a>
  </div>
  <div>
    &nbsp;Username:&nbsp;<input type="text" id="s_username" size="20"
                                onkeydown="if(event.keyCode==13){searchAdmin()
}"/> <a
      href="javascript:searchAdmin()" class="easyui-linkbutton"
      iconCls="icon-search" plain="true">Search</a>
  </div>
</div>

<div id="dlg" class="easyui-dialog"
     style="width: 620px; height: 250px; padding: 10px 20px" closed="true"
     buttons="#dlg-buttons">
  <form id="fm" method="post">
    <table cellspacing="8px">
      <tr>
        <td>Username:</td>
        <td><input type="text" id="username" name="username"
                   class="easyui-validatebox" required="true"/>&nbsp;<font
            color="red">*</font></td>
      </tr>
      <tr>
        <td>Rolename:</td>
        <td><input type="text" id="rolename" name="rolename"
                   class="easyui-validatebox" required="true"/>&nbsp;<font
                color="red">*</font></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="text" id="password" name="password"
                   class="easyui-validatebox" required="true"/>&nbsp;<font
            color="red">*</font></td>
      </tr>
    </table>
  </form>
</div>

<div id="dlg-buttons">
  <a href="javascript:saveAdmin()" class="easyui-linkbutton"
     iconCls="icon-ok">Save</a> <a href="javascript:closeAdminDialog()"
                                   class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
</div>
</body>
</html>